<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>待办事项 - 结构渲染</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      body {
        background-color: #2c3e50;
        color: #ecf0f1;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
        margin: 0;
      }
      .app-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
      .user-avatar {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-right: 15px;
      }
      .stats-info {
        background-color: #34495e;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
      }
      .input-section {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
      }
      .task-input {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 6px;
        background-color: #34495e;
        color: #ecf0f1;
        outline: none;
        font-size: 16px;
      }
      .task-input::placeholder {
        color: #95a5a6;
      }
      .add-btn {
        padding: 12px 20px;
        border: none;
        border-radius: 6px;
        background-color: #e91e63;
        color: #fff;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s;
      }
      .add-btn:hover {
        background-color: #c2185b;
      }
      button {
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        background-color: #34495e;
        color: #ecf0f1;
        cursor: pointer;
        margin: 3px;
        transition: all 0.3s;
      }
      button.active {
        background-color: #3498db;
        color: #fff;
      }
      button.secondary {
        background-color: #95a5a6;
      }
      button:hover {
        opacity: 0.8;
      }
      .priority-section {
        margin: 20px 0;
        background-color: #34495e;
        padding: 15px;
        border-radius: 8px;
      }
      .priority-options {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
      }
      .priority-options label {
        display: flex;
        align-items: center;
        cursor: pointer;
      }
      .priority-options input[type='radio'] {
        margin-right: 8px;
      }
      .task-list {
        margin-top: 20px;
      }
      .task-item {
        background-color: #34495e;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s;
      }
      .task-item.completed {
        opacity: 0.6;
        text-decoration: line-through;
      }
      .task-item.high-priority {
        border-left: 4px solid #e74c3c;
      }
      .task-item.medium-priority {
        border-left: 4px solid #3498db;
      }
      .task-item.low-priority {
        border-left: 4px solid #95a5a6;
      }
      .task-content {
        flex: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .priority-indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
      }
      .priority-重要 {
        background-color: #e74c3c;
      }
      .priority-一般 {
        background-color: #3498db;
      }
      .priority-低 {
        background-color: #95a5a6;
      }
      .task-actions {
        display: flex;
        gap: 10px;
      }
      .filter-section {
        margin: 20px 0;
        padding: 15px;
        background-color: #34495e;
        border-radius: 8px;
      }
      .stats {
        display: flex;
        gap: 15px;
        margin: 15px 0;
        flex-wrap: wrap;
      }
      .stat-item {
        padding: 12px;
        background-color: #2c3e50;
        border-radius: 6px;
        text-align: center;
        min-width: 80px;
        border: 1px solid #34495e;
      }
      .stat-item div:first-child {
        font-size: 12px;
        color: #95a5a6;
        margin-bottom: 4px;
      }
      .stat-item div:last-child {
        font-size: 18px;
        font-weight: bold;
        color: #3498db;
      }
      .empty-state {
        text-align: center;
        padding: 40px;
        color: #888;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 应用头部 -->
      <div class="app-header">
        <div class="user-avatar">👤</div>
        <h1>{{title}}</h1>
      </div>

      <!-- 统计信息 -->
      <div class="stats-info">
        <p v-html="statsMessage"></p>
      </div>

      <!-- 任务输入区域 -->
      <div class="input-section">
        <input
          type="text"
          class="task-input"
          v-model="newTask"
          @keyup.enter="addTask"
          placeholder="把计划写下来吗?"
        />
        <button class="add-btn" @click="addTask">添加</button>
      </div>

      <!-- 优先级选择 -->
      <div class="priority-section">
        <div class="priority-options">
          <label>
            <input type="radio" value="重要" v-model="priority" />
            重要
          </label>
          <label>
            <input type="radio" value="一般" v-model="priority" />
            一般
          </label>
          <label>
            <input type="radio" value="低" v-model="priority" />
            低
          </label>
        </div>
        <div class="priority-display">任务优先级: {{priority}}</div>
      </div>

      <!-- 统计信息 -->
      <div class="stats">
        <div class="stat-item">
          <div>总任务</div>
          <div>{{tasks.length}}</div>
        </div>
        <div class="stat-item">
          <div>已完成</div>
          <div>{{completedCount}}</div>
        </div>
        <div class="stat-item">
          <div>未完成</div>
          <div>{{pendingCount}}</div>
        </div>
        <div class="stat-item">
          <div>完成率</div>
          <div>{{completionRate}}%</div>
        </div>
      </div>

      <!-- 筛选控制 -->
      <div class="filter-section">
        <h3>筛选控制</h3>

        <!-- 状态筛选 -->
        <div style="margin: 10px 0">
          <span>状态筛选：</span>
          <button @click="currentFilter = 'all'" :class="{active: currentFilter === 'all'}">
            全部 ({{tasks.length}})
          </button>
          <button @click="currentFilter = 'pending'" :class="{active: currentFilter === 'pending'}">
            未完成 ({{pendingCount}})
          </button>
          <button
            @click="currentFilter = 'completed'"
            :class="{active: currentFilter === 'completed'}"
          >
            已完成 ({{completedCount}})
          </button>
        </div>

        <!-- 优先级筛选 -->
        <div style="margin: 10px 0">
          <span>优先级筛选：</span>
          <button @click="priorityFilter = 'all'" :class="{active: priorityFilter === 'all'}">
            全部优先级
          </button>
          <button @click="priorityFilter = '重要'" :class="{active: priorityFilter === '重要'}">
            重要
          </button>
          <button @click="priorityFilter = '一般'" :class="{active: priorityFilter === '一般'}">
            一般
          </button>
          <button @click="priorityFilter = '低'" :class="{active: priorityFilter === '低'}">
            低
          </button>
        </div>

        <!-- 批量操作 -->
        <div style="margin: 10px 0">
          <span>批量操作：</span>
          <button @click="markAllCompleted" class="secondary">全部完成</button>
          <button @click="markAllPending" class="secondary">全部未完成</button>
          <button @click="clearCompleted" class="secondary">清除已完成</button>
          <button @click="clearAll" class="secondary">清空全部</button>
        </div>
      </div>

      <!-- 任务列表 -->
      <div class="task-list">
        <h3>任务列表</h3>

        <!-- 空状态 -->
        <div v-if="filteredTasks.length === 0" class="empty-state">
          <div v-if="tasks.length === 0">🎯 还没有任务，开始添加第一个任务吧！</div>
          <div v-else>📋 当前筛选条件下没有任务</div>
        </div>

        <!-- 任务列表 -->
        <div v-else>
          <div
            v-for="(task, index) in filteredTasks"
            :key="task.id"
            class="task-item"
            :class="{
                        'completed': task.completed,
                        'high-priority': task.priority === '重要',
                        'medium-priority': task.priority === '一般',
                        'low-priority': task.priority === '低'
                    }"
          >
            <div class="task-content" @click="toggleTask(task.id)">
              <span>{{task.completed ? '✅' : '⭕'}} {{task.text}}</span>
              <small style="margin-left: 10px; opacity: 0.7">
                ({{task.priority}}) - {{task.createdAt}}
              </small>
            </div>
            <div class="task-actions">
              <button
                @click="toggleTask(task.id)"
                :style="{backgroundColor: task.completed ? '#28a745' : '#ffc107'}"
              >
                {{task.completed ? '取消完成' : '标记完成'}}
              </button>
              <button @click="removeTask(task.id)" style="background-color: #dc3545">删除</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 调试信息 -->
      <div
        v-if="showDebug"
        style="margin-top: 30px; padding: 15px; background: rgba(255, 255, 255, 0.1)"
      >
        <h4>调试信息</h4>
        <p>当前筛选: {{currentFilter}} | 优先级筛选: {{priorityFilter}}</p>
        <p>筛选后任务数: {{filteredTasks.length}}</p>
        <button @click="showDebug = false">隐藏调试</button>
      </div>
      <button v-else @click="showDebug = true" class="secondary">显示调试信息</button>
    </div>

    <script>
      const { createApp, ref, computed } = Vue

      const App = {
        setup() {
          const title = ref('你的待办事项')
          const statsMessage = ref(
            "<span style='color:#ffd700'>报告主人！你还有 <span style='color:#e74c3c'>0</span> 个待办事项未完成，有 <span style='color:#e74c3c'>0</span> 个已经过期了，有时间的话，赶紧去做吧。</span>"
          )
          const newTask = ref('')
          const priority = ref('一般')
          const tasks = ref([])
          const currentFilter = ref('all') // all, pending, completed
          const priorityFilter = ref('all') // all, 重要, 一般, 低
          const showDebug = ref(false)

          let nextId = 1

          // 计算属性：统计信息
          const completedCount = computed(() => {
            return tasks.value.filter(task => task.completed).length
          })

          const pendingCount = computed(() => {
            return tasks.value.filter(task => !task.completed).length
          })

          const completionRate = computed(() => {
            if (tasks.value.length === 0) return 0
            return Math.round((completedCount.value / tasks.value.length) * 100)
          })

          // 计算属性：筛选后的任务
          const filteredTasks = computed(() => {
            let filtered = tasks.value

            // 按状态筛选
            if (currentFilter.value === 'pending') {
              filtered = filtered.filter(task => !task.completed)
            } else if (currentFilter.value === 'completed') {
              filtered = filtered.filter(task => task.completed)
            }

            // 按优先级筛选
            if (priorityFilter.value !== 'all') {
              filtered = filtered.filter(task => task.priority === priorityFilter.value)
            }

            return filtered
          })

          // 添加任务
          const addTask = () => {
            if (newTask.value.trim() === '') {
              alert('请输入任务内容！')
              return
            }

            const now = new Date()
            tasks.value.push({
              id: nextId++,
              text: newTask.value.trim(),
              priority: priority.value,
              completed: false,
              createdAt: now.toLocaleString()
            })

            newTask.value = ''
          }

          // 切换任务状态
          const toggleTask = taskId => {
            const task = tasks.value.find(t => t.id === taskId)
            if (task) {
              task.completed = !task.completed
            }
          }

          // 删除任务
          const removeTask = taskId => {
            if (confirm('确定要删除这个任务吗？')) {
              const index = tasks.value.findIndex(t => t.id === taskId)
              if (index > -1) {
                tasks.value.splice(index, 1)
              }
            }
          }

          // 批量操作
          const markAllCompleted = () => {
            tasks.value.forEach(task => {
              task.completed = true
            })
          }

          const markAllPending = () => {
            tasks.value.forEach(task => {
              task.completed = false
            })
          }

          const clearCompleted = () => {
            if (confirm('确定要清除所有已完成的任务吗？')) {
              tasks.value = tasks.value.filter(task => !task.completed)
            }
          }

          const clearAll = () => {
            if (confirm('确定要清空所有任务吗？')) {
              tasks.value = []
            }
          }

          // 初始化一些示例数据
          tasks.value = [
            {
              id: nextId++,
              text: '学习Vue模板指令',
              priority: '重要',
              completed: false,
              createdAt: new Date().toLocaleString()
            },
            {
              id: nextId++,
              text: '完成作业',
              priority: '一般',
              completed: true,
              createdAt: new Date().toLocaleString()
            },
            {
              id: nextId++,
              text: '锻炼身体',
              priority: '低',
              completed: false,
              createdAt: new Date().toLocaleString()
            }
          ]

          return {
            title,
            statsMessage,
            newTask,
            priority,
            tasks,
            currentFilter,
            priorityFilter,
            showDebug,
            completedCount,
            pendingCount,
            completionRate,
            filteredTasks,
            addTask,
            toggleTask,
            removeTask,
            markAllCompleted,
            markAllPending,
            clearCompleted,
            clearAll
          }
        }
      }

      createApp(App).mount('#app')
    </script>
  </body>
</html>
